<template>


	<view class="main">
		<u-navbar :fixed="false" title="考勤打卡" @rightClick="rightClick" :autoBack="true"></u-navbar>
		<view class="container">

			<view class="top">
				<view class="content">
					<ren-calendar :headerBar='false' ref='ren' :disabledAfter='true' :disabledBefore='true' :markDays='markDays' @onDayClick='onDayClick'></ren-calendar>
				</view>
			</view>


			<view class="bykq">
				<view class=" xx">
					<view class="xianwz">打卡</view>
					<view class="xian"></view>
				</view>
			</view>

			<view class="sxb">

				<view class="sxbb ">

					<view class="row space-between" @click="addAttendanceFuc()">
						<view class="row">
							<view>
								<image class="sbk" src="/static/images/sbk.png"></image>
							</view>
							<view class="sbdka">
								<view class="sbdkwz">上班打卡</view>
								<view class="sbdktime">09:00</view>
							</view>
						</view>
						<view class="column_c" v-if="clock_in">
							<image class="ggg" src="/static/images/ggg.png"></image>
							<view class="xbsj">{{clock_in}}</view>
						</view>
						<view class="column_c" v-else>
							<view class="dkdk center">打卡</view>
						</view>
					</view>

					<view class="xinga"></view>


					<view class="row space-between" @click="addAttendanceFuc()">
						<view class="row">
							<view>
								<image class="sbk" src="/static/images/xbk.png"></image>
							</view>
							<view class="sbdka ">
								<view class="sbdkwz">下班打卡</view>
								<view class="sbdktime">18:00</view>
							</view>
						</view>

						<view class="column_c" v-if="clock_out">
							<image class="ggg" src="/static/images/ggg.png"></image>
							<view class="xbsj">{{clock_out}}</view>
						</view>

						<view class="column_c" v-else>
							<view class="dkdk center">打卡</view>
						</view>
					</view>

				</view>


			</view>
		</view>





	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue';
	import api_clockin from '@/api/clockin.js';
	import api_index from '@/api/index.js';
	export default {
		components: {
			RenCalendar
		},
		data() {
			return {
				longitude: '106.363202', //当前经度
				latitude: '29.609977', //当前纬度
				access_token: '',
				indexArr: '',
				valueArr: '',
				curDate: '',
				markDays: [],
				userInfo: null,
				kqinfo: null,
				clock_in: null,
				clock_out: null,
			};
		},


		async onShow() {
			this.access_token = uni.getStorageSync('access_token');
			if (!this.access_token) {
				uni.navigateTo({
					url: '/pages/auth/login'
				});
			} else {
				this.userInfo = uni.getStorageSync('userInfo');
				console.log('员工用户信息', this.userInfo);
				this.getattendanceStaffListFuc();
			}
		},

		methods: {
			//添加考勤
			async addAttendanceFuc() {
				var per = {
					longitude: this.longitude,
					latitude: this.latitude,
				}
				const res = await api_clockin.addAttendance(per);
				if (res.code == 1) {
					this.$util.msg(res.message);
					this.getattendanceStaffListFuc();
					return;
				} else {
					this.$util.msg(res.message);
					return;
				}
			},

			//获取员工考勤信息
			async getattendanceStaffListFuc() {
				var per = {
					staff: this.userInfo.id,
					date: this.getNowDate(),
				}
				const res = await api_clockin.getattendanceStaffList(per);
				if (res.code == 1) {
					this.kqinfo = res.data.info;
					if (this.kqinfo.clock_in) {
						this.clock_in = this.getsftime(this.kqinfo.clock_in);
					}
					if (this.kqinfo.clock_out) {
						this.clock_out = this.getsftime(this.kqinfo.clock_out);
					}
					this.$util.msg(res.message);
					return;
				} else {
					this.$util.msg(res.message);
					return;
				}
			},

			//获取当前时间
			getNowDate() {
				const now = new Date();
				// 格式化日期为 YYYY-MM-DD
				const year = now.getFullYear(); // 获取年份
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 获取月份（0-11），+1 后补零
				const day = String(now.getDate()).padStart(2, '0'); // 获取日期，补零
				const formattedDate = `${year}-${month}-${day}`;
				console.log(formattedDate); // 输出格式为 2024-10-12
				return formattedDate;
			},


			getsftime(timees) {
				const dateTime = timees;
				const timePart = dateTime.split(" ")[1]; // 分割字符串，取第二部分
				const timeShort = timePart.slice(0, 5); // 截取前5个字符
				console.log(timeShort); // 输出：09:51
				return timeShort;
			},



			//获取经纬度
			getUserLocation() {
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: (res) => { // 使用箭头函数保持上下文
						this.latitude = res.latitude;
						this.longitude = res.longitude;
						console.log('Latitude:', this.latitude);
						console.log('Longitude:', this.longitude);
						this.$nextTick(() => {
							console.log('地图数据更新完成');
						});
					},
					fail: (err) => {
						console.error('获取位置失败', err);
					}
				});
			},


			onDayClick(data) {
				this.curDate = data.date;
			},
			getDate(e) {
				console.log('选中的月份：' + e.value)
			},
			//获取选中的日期
			checkDate(e) {
				console.log('选中的日期：' + e.value)
			},
			confirm(e) {
				this.indexArr = e.index;
				this.valueArr = e.value;
			},

		}
	};
</script>

<style lang="scss">
	page,
	.container {
		min-height: 1400rpx;
		background-color: #f6f7f9;
	}

	.content {
		.change {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			margin-top: 100rpx;
			height: 100rpx;
			color: #b89249;
			background-color: #21191b;
		}
	}

	.top {
		margin-top: 15rpx;
	}

	.sxb {
		padding: 0 32rpx;
		margin-top: 30rpx;
	}

	.bykq {
		padding: 0 32rpx;
		margin-top: 0rpx;

	}

	.sxbb {
		height: 346rpx;
		width: 100%;


		background: #FFFFFF;
		border-radius: 15rpx;
		padding: 20px;

	}

	.sbk {
		width: 64rpx;
		height: 64rpx;
	}

	.ggg {
		width: 32rpx;
		height: 32rpx;
		margin-top: 10rpx;
	}

	.sbdka {
		margin-left: 60rpx;
		width: 390rpx;
	}

	.sbdkwz {
		font-weight: 500;
		font-size: 32rpx;
		color: #3D3D3D;

	}

	.sbdktime {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 24rpx;
	}

	.xbsj {
		font-weight: 400;
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.6);
		margin-top: 24rpx;
	}

	.xinga {
		width: 100%;
		border: 1rpx dashed #E7E7E7;
		margin-top: 32rpx;
		margin-bottom: 32rpx;
	}

	.dkdk {
		width: 120rpx;
		height: 52rpx;
		background: #E9F9F8;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		font-size: 28rpx;
		color: #27CCBB;
	}


	.xx {
		margin: 48rpx 0 32rpx 0;
	}

	.xian {
		width: 60rpx;
		height: 8rpx;
		background: linear-gradient(180deg, #EBF6F6 0%, #27CCBB 100%);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		margin-top: 10rpx;
	}

	.xianwz {
		font-weight: 500;
		font-size: 32rpx;
		color: rgba(0, 0, 0, 0.9);
	}
</style>